<template>
  <div >
    <div class="top"  >
      <header>
        <div class="div" >
          <img v-show="token === ''" @click="back()" src="../../assets/fff返回.png" alt="">
          <span v-show="token === ''" @click="back()">返回</span>
        </div>
        <div class="div">
        </div>
        <div class="div">
<!--          <a style="display: flex;align-items: center" @click="clickyiHuan()" v-if="Number(show) === 0 && isMe === false">-->
<!--            <img src="../../assets/在线咨询白@2x.png" alt="">-->
<!--            <span>医患沟通</span>-->
<!--          </a>-->
          <img @click="healthRecords()" src="../../assets/健康记录.png" style="width: 15px;height: 15px;" alt="">
          <a @click="healthRecords()" style="margin-right: 10px">信息筛查</a>
<!--          <a style="display: flex;align-items: center" @click="zixun()" v-else-if="Number(show) === 1">-->
<!--            <img src="../../assets/在线咨询白@2x.png" alt="">-->
<!--            <span>在线咨询</span>-->
<!--          </a>-->
        </div>
      </header>
      <div class="title">
        <ul>
          <li class="photo">
            <img :src="peopleList.PHOTO" v-if="peopleList.PHOTO !== undefined && peopleList.PHOTO !== null && peopleList.PHOTO !== ''" alt="">
            <img src="../../assets/男大@2x.png" v-else-if="Number(peopleList.sex) === 1 || peopleList.SEX === 1" alt="">
            <img src="../../assets/女大@2x.png" v-else-if="Number(peopleList.sex) === 2 || peopleList.SEX === 2" alt="">
          </li>
          <li>
            <p class="xinxi">
              <span>{{peopleList.name}}</span>
              <span class="heng">|</span>
              <span v-if="peopleList.sex == 1 || peopleList.SEX === 1">男</span>
              <span v-else-if="peopleList.sex == 2 || peopleList.SEX === 2">女</span>
              <span class="heng">|</span>
              <span>{{peopleList.age}}岁</span>
            </p>
            <p ><span>{{peopleList.phone}}</span></p>
            <p ><span>{{peopleList.zuizhongAddress}}</span></p>
          </li>
          <li class="erweima" v-show="show === 1">
            <img  src="../../assets/二维码@2x.png" @click="clickErweima()" alt="">
            <span>扫码请点击</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="content" >
      <div class="baogao" v-for="(item, index) in menuList" :key="index">
        <ul >
          <div class="title1" v-show="item.dict_type === 'health_info'">
            <a class="hengGang"></a>
            <span >{{item.dict_name}}</span>
          </div>
          <li
            @click="clickMenuLi(childenItem)"
            :class="{no: childenItem.url === '#', li_left: item.dict_type === 'health_spec'}"
              v-for="(childenItem, childenIndex) in item.oauths" :key="childenIndex"
          >
            <img :src="childenItem.icon"  alt="">
            <span>{{childenItem.title}}</span>
            <a class="quanXian" v-show="childenItem.isEdit === -1 && childenItem.url !== '#' && item.dict_type !== 'health_spec'">无权限</a>
          </li>
          <li class="li_right" v-show="item.dict_type === 'health_spec'" @click="clickMenuLi(item.oauths[0])">
            <img src="../../assets/更多黑@2x.png" alt="">
            <a class="quanXian" v-show="item.oauths[0].isEdit === -1 && item.oauths[0].url !== '#'">无权限</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'FilesXQ',
  data () {
    return {
      isShow: false,
      userid: '',
      id: '',
      name: '',
      sex: '',
      age: '',
      address: '',
      phone: '',
      menuList: [],
      NowID: '',
      peopleList: [],
      show: '',
      jmx_user_id: '',
      isMe: false,
      NICK_NAME: '',
      token: '',
      team_id: this.$route.query.team_id
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.id = this.$utils.getUrlKey('id')
    this.show = Number(this.$utils.getUrlKey('show'))
    this.token = this.$utils.getUrlKey('token')
    if (this.token !== '' && this.token !== null && this.token !== undefined) {
      sessionStorage.setItem('token', this.token)
    } else {
      this.token = ''
    }
    if (this.id === '' || this.id === null || this.id === undefined) {
      this.getPerson()
    } else {
      this.getPeople(this.id)
    }
    // $('.content').css('height', $(window).height() - $('.top').height() - 50 + 'px')
  },
  methods: {
    healthRecords () {
      this.$router.push({path: '/healthList', query: {data_user_id: this.NowID}})
    },
    // 点击我的菜单
    clickMenuLi (childenItem) {
      if (Number(childenItem.isEdit) === -1) {
        Toast('您暂无此模块权限')
        return false
      } else {
        if (sessionStorage.getItem('sys') === 'ANDROID' && childenItem.android_url) {
          window.WebViewJavascriptBridge.callHandler(childenItem.android_url, childenItem.android_param, function (responseData) {
          })
        } else if (childenItem.url !== '#') {
          let json = JSON.parse(childenItem.param)
          this.$set(json, 'isEdit', childenItem.isEdit)
          this.$router.push({path: childenItem.url, query: json})
        } else {
          Toast('此模块正在开发中')
        }
      }

      // if (sessionStorage.getItem('sys') === 'ANDROID' && childenItem.android_url) {
      //     window.WebViewJavascriptBridge.callHandler(childenItem.android_url, childenItem.android_param, function (responseData) {
      //     })
      // } else if (childenItem.url !== '#') {
      //   if (Number(childenItem.isEdit) === -1) {
      //     Toast('您暂无此模块权限')
      //     return false
      //   }
      //   // let json = JSON.parse(childenItem.param)
      //   // if (childenItem.isEdit !== null && childenItem.isEdit !== undefined) {
      //   //   json = JSON.parse(childenItem.param)
      //   // } else {
      //
      //   // }
      //   let json = JSON.parse(childenItem.param)
      //   this.$set(json, 'isEdit', childenItem.isEdit)
      //   this.$router.push({path: childenItem.url, query: json})
      // } else {
      //   Toast('此模块正在开发中')
      // }
    },
    getNoTokenMenu () {
      this.$http.listHealthInfoPublic({data_user_id: this.NowID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.menuList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取菜单
    getMenu () {
      this.$http.listHealthInfo({data_user_id: this.NowID, team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.menuList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 在线咨询
    zixun () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('onLineService', {'param': ''}, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 点击医患沟通
    clickyiHuan () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        // var obj = {
        //   id: this.jmx_user_id
        // }
        // var params = JSON.parse(obj)
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', this.jmx_user_id + ',' + this.NICK_NAME + ',' + '0', function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 点击二维码
    clickErweima () {
      this.$router.push({path: '/filesErweima', query: {userid: this.userid}})
    },
    // 管理档案进入获取信息
    getPeople (id) {
      this.$http.findOnehealthFormationpeopleTuoMin({id: id})
        .then(res => {
          console.log(res)
          this.peopleList = res.data
          this.NowID = res.data.jmx_user_id
          this.jmx_user_id = res.data.jmx_user_id
          this.NICK_NAME = res.data.NICK_NAME
          if (this.userid === res.data.jmx_user_id) {
            this.isMe = true
          }
          this.sex = res.data.sex
          this.age = res.data.age
          if (sessionStorage.getItem('token') === null) {
            this.getNoTokenMenu()
          } else {
            this.getMenu()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 我的档案进入 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            this.NowID = res.data.data.USER_ID
            this.sex = res.data.data.sex
            this.age = res.data.data.age
            if (this.id === null || this.id === undefined || this.id === '') {
              this.id = res.data.data.id
            }
            if (sessionStorage.getItem('token') === null) {
              this.getNoTokenMenu()
            } else {
              this.getMenu()
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击个人档案
    clickGeren () {
      if (this.id === '' || this.id === null || this.id === undefined) {
        this.$router.push({path: '/profiles', query: {'userid': this.userid, 'id': this.id, 'NowID': this.NowID}})
      } else {
        this.$router.push({path: '/profiles', query: {'userid': this.userid, 'id': this.id, 'NowID': this.NowID, 'isAdd': 0}})
      }
    },
    // 点击残疾人档案
    clickCanji () {
      // peopleList
      this.$router.push({path: '/filesZhuanXiang', query: {id: this.id, userid: this.userid, jmx_user_id: this.jmx_user_id, sex: this.sex, age: this.age}})
    },
    clickNo (name, item) {
      if (item.url === '/self') {
        console.log(item.name)
        if (item.name === '门诊评估信息') {
          this.$router.push({path: item.url, query: {'ACCEPT_USER_ID': this.NowID, 'type': 1, 'assess_type': 1}})
          // sessionStorage.setItem('assess_type', '1')
        } else if (item.name === '住院评估信息') {
          this.$router.push({path: item.url, query: {'ACCEPT_USER_ID': this.NowID, 'type': 1, 'assess_type': 2}})
          // sessionStorage.setItem('assess_type', '2')
        } else if (item.name === '居家评估信息') {
          this.$router.push({path: item.url, query: {'ACCEPT_USER_ID': this.NowID, 'type': 1, 'assess_type': 3}})
          // sessionStorage.setItem('assess_type', '3')
        }
      } else if (name === '健康数据采集') {
        this.$router.push({path: item.url, query: {'userid': this.NowID}})
      } else if (name === '保险签约') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid}})
      } else if (name === '门诊检查信息') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid, isJianCha: true, 'morz': '1'}})
      } else if (name === '住院检查信息') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid, isJianCha: true, 'morz': '2'}})
      } else if (name === '门诊检验信息') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid, isJianCha: false, 'morz': '1'}})
      } else if (name === '住院检验信息') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid, isJianCha: false, 'morz': '2'}})
      } else if (item.url === '/chufangList') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid}})
      } else if (name === '门诊就诊记录') {
        this.$router.push({path: item.url, query: {'userid': this.NowID, 'myUserid': this.userid, isJianCha: false}})
      } else if (name === '图文问诊') {
        this.$router.push({path: item.url})
      } else {
        Toast('此模块正在开发中...')
      }
    },
    clickFamily () {
      Toast('此模块正在开发中...')
    }
  },
  destroyed () {
    var obj = {
      sex: this.sex,
      age: this.age,
      jmx_user_id: this.jmx_user_id
    }
    sessionStorage.setItem('filesInfo', JSON.stringify(obj))
    sessionStorage.setItem('ACCEPT_USER_ID', this.NowID)
    sessionStorage.removeItem('HealthList')
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }
  .no {
    /*background: #ededed !important;*/
    /*opacity: 0.5;*/
    color: #999 !important;
  }
  .top {
    color: #fff;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  header {
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    color: #fff;
  }

  header .div {
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }

  header .div:nth-child(2) {
    justify-content: center;
  }
  header .div:nth-child(3){
    justify-content: flex-end;
  }
  header .div:nth-child(3) img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  header .div:nth-child(3) span{
    margin-right: 15px;
  }

  header div:nth-child(1) img {
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }

  .title{
    width: 100%;
    height: 120px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .title ul {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .title ul li p {
    margin-bottom: 5px;
    margin-right: 10px;
    font-size:13px;
    display: flex;
    align-items: center;
  }
  .title ul li:nth-child(2){
    width: 65%;
  }

  .title .photo img {
    width: 60px;
    height: 60px;
    margin: 0 15px;
    border-radius: 50%;
    object-fit: cover;
  }
  .erweima{
    width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .erweima img{
    width: 35px;
    height: 35px;
  }
  .erweima span{
    color: white;
    font-size: 11px;
    margin-top: 5px
  }
  .xinxi{
    font-size: 15px !important;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .heng{
    margin: 0 5px;
    transform: scaleY(0.85);
  }
  .content {
    width: 100%;
    overflow: auto;
    background: #FAF9FE;
    box-sizing: border-box;
  }
  .divTop{
    width: 97%;
    height: 75px;
    display: flex;
    align-items: center;
    margin: 10px auto 0 auto;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  }
  .zhuanxiangUl{
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  }
  .divTop .gerenDiv, .familyDiv{
    width: 49%;
    height: 100%;
    /*background: #FFFFFF;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: PingFang SC;
    color: #333333;
  }
  .gerenDiv{
    border-left: 1px solid #E5E5E5;
  }
  .gerenImg, .familyImg{
    margin: 0 13px 0 0 !important;
  }
  .familyDiv{
    margin-right: 1.5%;
  }
  .content img {
    width: 22px;
    height: 22px;
    margin: 0 13px;
  }

  .content ul {
    width: 97%;
    height: 65px;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    margin: 5px auto 0 auto;
    display: flex;
  }

  .content ul li {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    color: #333333;
  }
  .li_left{
    border: none !important;
  }
  .li_right{
    display: flex;
    justify-content: flex-end !important;
    border: none !important;
    /*flex-direction: row-reverse;*/
  }
  .li_right img{
    width: 7px;
    height: 13px;
    margin-right: 5vw;
  }
  .baogao{
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px 10px 0 0;
    margin: 8px auto;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
    /*box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);*/
  }
  .baogao:last-child{
    margin-bottom: 30px;
  }
  .baogao ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 10px;
    /*justify-content: center;*/
  }
  .baogao ul li{
    width: 49.8%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    font-weight: 500;
    border-bottom: 1px solid #E5E5E5;
    position: relative;
  }
  .baogao ul li span{
    display: flex;
    width: 110px;
  }
  /*.baogao ul li:nth-child(odd) {*/
  /*  border-left: 1px solid #E5E5E5;*/
  /*}*/
  .baogao ul li:nth-child(even) {
    border-right: 1px solid #E5E5E5;
  }
  .title1{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #e5e5e5;
  }
  .quanXian{
    width: 50px;
    text-align: center;
    white-space: nowrap;
    background: #F5F5F5;
    border-radius: 0px 0px 0px 5px;
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
</style>
